<template>
  <div class="detail-params" v-if="Object.keys(goodsparam).length !==0">
    <table class="top" v-for="(item,index) in goodsparam.sizes" :key="index">
      <tr v-for="(tr,indexx) in item" :key="indexx"> 
        <td v-for="(td,indexy) in tr" :key="indexy">{{td}}</td>
      </tr>
    </table>
    <table class="bottom">
      <tr v-for="(item,index) in goodsparam.info" :key="index">
        <td>{{item.key}}</td> 
        <td style="color:var(--color-high-text)">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'detailGoodsParam',
  props:{
    goodsparam:{
      type: Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style scoped>
  .detail-params{
    margin-top: 10px;
    width: 100%;
  }

  table {
    width: 90%;
    border-collapse: collapse;
    margin: 0 auto;
  }

   td{
    height: 40px;
    line-height: 40px;
    border-bottom: rgba(177, 175, 175, 0.719) 1px solid;
  }
  
  .bottom td{
    width:10%;
  }
</style>